<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    // 原型（链）

    // 构造函数
    // 按照你的意愿(批量)生产对象的函数
    // 一般情况下 他只能被 new 关键字 操作
    // 首字母必须大写
    // new 关键字 做了什么？
    // 1.创建了一个空对象
    // 2.将this指向了这个空对象
    // 3.返回了创建的空对象



  /*  function A(){

    }


    A.prototype = o;


    console.dir(new A()); // {}*/



    //

    //
    // arr.__proto__ = {
    //     forEach: function (fn){
    //         for(var i = 0; i < this.length; i++){
    //             fn(this[i], i, this);
    //         }
    //     }
    // };
    //
    //
    // arr.forEach(function (v, k, arr){
    //     console.log(v);
    // });


    //
    //
    // var arr = new Arr(1, 2, 3, 4, 5);
    //
    // arr.forEach(function (v, k, arr){
    //     console.log(v);
    //     console.log(k);
    //     console.log(arr);
    // });


    function Arr1(){
        for(var i = 0; i < arguments.length; i++){
            this[i] = arguments[i];
        }
        this.length = i;
    }
    Arr1.prototype = {
        forEach:function (fn){
            for(var i = 0; i < this._arr.length; i++){
                fn(this._arr[i], i, this._arr);
            }
        }
    };
    var arr1_1 = new Arr1(13, 57, 90);
    var arr1_2 = new Arr1(13, 57, 90);

    console.log(arr1_1.forEach === arr1_2.forEach); //


    function Arr2(){
        for(var i = 0; i < arguments.length; i++){
            this[i] = arguments[i];
        }
        this.length = i;
        this.forEach = function (fn) {
            for(var i = 0; i < this.length; i++){
                fn(this[i], i, this);
            }
        };
    }


    var arr2_1 = new Arr2(1,3,5,7,9);
    var arr2_2 = new Arr2(1,3,5,7,9);

    console.log(arr2_1.forEach === arr2_2.forEach);
    // js 一切皆对象
    // js 函数是一等公民

    function a(config){
        var odiv = document.createElement('div');
        odiv.style.width = config.width;
        odiv.style.height = config.height;
        odiv.style.border = config.border;
        odiv.onclick = function (){
            this.style.background = config.bg;
        };
        document.body.appendChild(odiv);
    }



    function A(config) {
        this.config = config;
        this.init();
    }
    A.prototype = {
        init:function (){
            this.odiv = document.createElement('div');
            this.setStyle();
        },
        setStyle: function () {
            this.odiv.style.width = this.config.width;
            this.odiv.style.height = this.config.height;
            this.odiv.style.border = this.config.border;
            this.bindEvent();
            this.appendToBody();
        },
        appendToBody: function (){
            document.body.appendChild(this.odiv);
        },
        bindEvent:function (){
            var self = this;
            this.odiv.onclick = function () {
                this.style.background = self.config.bg;
            }
        }
    };


   /* var o1 = {a:1}
    var o2 = {b:2}
    var o3 = {c:3,
           f:function(){
               console.log(this.c);
        }}
      o1.__proto__ = o2;
      o2.__proto__ = o3;
      o1.f();*/


</script>
</body>
</html>